<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入库申请登记</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/plugin/iview/dist/styles/iview.css">

    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
</head>
<body>


<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <div><a style="font-size: 35px; padding-left: 43%">入库申请单</a></div>
        <!--搜索开始-->
        <fieldset class="table-search-fieldset" style="margin: 20px 0 20px 5%;width: 1500px;padding: 5px 10px">
            <div style="margin-top: 10px;">
                <i-button type="info" @click="modal8 = true" icon="ios-add-circle-outline"> 添 加 产 品 </i-button>
                <i-button type="success " @click="addOrUpdate" icon="checkmark-round"> 提 交 </i-button>
            </div>
        </fieldset>
        <!--搜索结束-->



        <form method="post" class="layui-form layui-form-pane" lay-filter="dataFrm" id="dataFrm">
            <div class="layui-form-item" style="padding-left: 5%">
                <div class="layui-inline" >
                    <label class="layui-form-label">入库人</label>
                    <div class="layui-input-inline">
                        <input type="text" name="storer" id="storer" lay-verify="required" autocomplete="off"
                               placeholder="请输入入库人姓名" class="layui-input" style="width: 300px">
                    </div>
                </div>
                <div class="layui-inline" style="padding: 0 222.5px">
                    <label class="layui-form-label">入库理由</label>
                    <div class="layui-input-inline">
                        <input type="text" name="reason" id="reason" lay-verify="required" autocomplete="off"
                               placeholder="请输入入库理由" class="layui-input" style="width: 300px">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">登记人</label>
                    <div class="layui-input-inline">
                        <input type="text" name="register" id="register" lay-verify="required" autocomplete="off"
                               placeholder="请输入登记人姓名" class="layui-input" style="width: 300px">
                    </div>
                </div>
            </div>


            <div class="layui-form-item" style="padding-left: 5%">
                <div class="layui-inline" style="padding-right: 222.5px">
                    <label class="layui-form-label">总件数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="amountSum" id="amountSum" lay-verify="required" autocomplete="off"
                               placeholder="请输入总件数" class="layui-input" style="width: 300px">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">总金额</label>
                    <div class="layui-input-inline">
                        <input type="text" name="costPriceSum" id="costPriceSum" lay-verify="required" autocomplete="off"
                               placeholder="请输入总金额" class="layui-input" style="width: 300px">
                    </div>
                </div>
            </div>
        </form>


            <!--数据表格-->
            <div style="margin: 20px 0 20px 5%;width: 1500px;">
            <i-table border :columns="columns1" :data="data1" >
                <template slot-scope="{ row, index }" slot="action">
                    <i-button type="primary" size="small" style="margin-right: 5px" @click="tuihui(row,index)"> 退 回 </i-button>
                </template>
                <template slot-scope="{ row, index }" slot="amountUnit">
                    {{row.amountUnit}}
                </template>
                <template slot-scope="{ row, index }" slot="productDescribe">
                    <i-input></i-input>
                </template>
                <template slot-scope="{ row, index }" slot="amount">
                    <Input-number></Input-number>
                </template>
                <template slot-scope="{ row, index }" slot="subtotal">
                    <Input-number></Input-number>
                </template>
            </i-table>
            </div>




        <div style="padding-left: 5%">
        <!--分页-->
        <Page
                :page-size-opts=[5,10,15,20]
                :current="page"
                :page-size="pageSize"
                style="margin-top: 20px"
                :total="total"
                @on-change="currentPageChange"
                @on-page-size-change="currentPageSizeChange"
                show-total
                show-sizer
                show-elevator/></div>
        <!--分页-->
        <!--modal-->
        <Modal width="1500" title="Title" v-model="modal8" :mask-closable="false">

            <!--数据表格-->
            <i-table
                    :columns="columns2" :data="data2">
                <template slot-scope="{ row, index }" slot="action">
                    <i-button v-if="indexVal == 0" icon="md-checkmark-circle" type="success" size="small" style="margin-right: 5px" @click="ruku(row)"> 入 库</i-button>
                </template>
            </i-table>


        </Modal>
        <!--modal-->

    </div>
</div>



<!-- 你的HTML代码 -->

<!--jq-->
<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../../../lib/plugin/vue/vue.min.js"></script>
<script src="../../../lib/plugin/iview/dist/iview.min.js"></script>

<!--layui-->
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>

<!--axios-->
<script src="../../../lib/plugin/axios/axios.min.js"></script>

<!--系统文件-->
<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
<script src="../../../lib/common/common.js" charset="utf-8"></script>
<script>

    let urlApi = 'http://127.0.0.1:8004/';
    let vue;

    $("#addDept").click(function () {
        openAdddept();
    });

    // 入口函数
    $(function () {
        // http request 拦截器
        axios.interceptors.request.use(
            config => {
                if (token) { //判断token是否存在
                    config.headers.token = $.cookie("TOKEN");  //将token设置成请求头
                }
                return config;
            },
            err => {
                return Promise.reject(err);
            }
        );

        // 初始化Vue
        vue = new Vue({
            // 控制区域
            el: '#app',
            // 数据
            data: {
                indexVal: 0,
                columns1: [
                    {title: '产品名称',fixed: 'left', key: 'productName', align: 'center'},
                    {title: '产品编号', key: 'productId', align: 'center'},
                    {title: '数量', slot: 'amount', align: 'center'},
                    {title: '单位', slot: 'amountUnit', align: 'center'},
                    {title: '成本单价', key: 'realCostPrice', align: 'center'},
                    {title: '小计', slot: 'subtotal', align: 'center'},
                    {title: '描述',align: 'center',slot: 'productDescribe'},
                    {title: '地址',slot: 'action',align: 'center'}
                ],
                data1: [],

                columns2: [
                    {title: '产品编号',fixed: 'left', key: 'productId', align: 'center'},
                    {title: '产品名称', key: 'productName', align: 'center'},
                    {title: '单位', key: 'amountUnit', align: 'center'},
                    {title: '单价', key: 'realCostPrice', align: 'center'},
                    {
                        title: '操作',
                        slot: 'action',
                        width: 280,
                        fixed: 'right',
                        align: 'center'
                    }
                ],
                data2: [],
                page: 1,
                pageSize: 10,
                total: 9,
                modal8: false
            },

            // 方法
            methods: {
                addOrUpdate(){
                    this.$Message.error('正在提交');

                    let obj = {
                        productName:[],//产品名称
                        productId:[],//产品编号
                        amount:[],//数量
                        amountUnit:[],//单位
                        CostPrice:[],//成本单价
                        subtotal:[],//小计
                        productDescribe:[],//描述

                        reason: this.reason,//入库理由
                        register: this.register,//登记人
                        amountSum: this.amountSum,//总件数
                        costPriceSum: this.costPriceSum,//总金额
                    }

                    for (let i = 0; i < this.data1.length; i++) {
                        obj.productName.push(this.data1[i].productName);
                        obj.productId.push(this.data1[i].productId);
                        obj.amount.push((this.data1[i].amount));
                        obj.amountUnit.push(this.data1[i].amountUnit);
                        obj.CostPrice.push(this.data1[i].CostPrice);
                        obj.subtotal.push((this.data1[i].subtotal));
                        obj.productDescribe.push(this.data1[i].productDescribe);
                    }



                    axios.post(urlApi + 'warehouseInbound/insertWarehousing',obj).then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });

                        // this.loadInventoryAllocationSheet();
                        this.drawerValue = false;

                    }).catch(err => {
                        this.$Message.error('提交失败');
                    })

                },

                // loadInventoryAllocationSheet() {
                //     this.loading = true;
                //     axios.get(safeApi + "warehouseInbound/updateWarehousing?page=" + this.page + "&limit=" + this.pageSize + "&checkTag=审核通过&inventoryStatus=0").then(res => {
                //         this.data1 = res.data.data;
                //         this.total = res.data.total;
                //
                //         this.loading = false;
                //     }).catch(err => {
                //         this.$Message.error('对方不想说话，并且向你抛出了一个异常');
                //     });
                // },


                tuihui(row,index){
                    this.data1.splice(index,1);
                },


                ruku(row){
                    this.data1.push(row);

                    console.log(this.data1);
                },
                tabsEventClick(val) {
                    this.indexVal = val;
                },
                initTableData2() {
                    axios.post(urlApi + "warehouseStock/findPagecheck?page="+this.page+"&limit="+this.pageSize+"&checkTag=审核通过"+"&inventoryStatus=1").then(res=>{
                        console.log(res.data);
                        this.data2 = res.data.data;
                    }).catch(err => {
                        this.initTableData2();
                        this.$Message.error('正在加载');
                    });
                },
                //当前页发生改变
                currentPageChange(val) {
                    this.page = val;

                    // 重新渲染表格数据
                    this.initTableData2();
                },
                // 当前页显示条数发生改变
                currentPageSizeChange(val) {
                    this.pageSize = val;

                    // 重新渲染表格数据
                    this.initTableData2();
                },
            },
            // 钩子函数
            mounted() {
                this.initTableData2();
            }
        })
    });
</script>
</body>
</html>
